/* pages/my/index.wxss */
page {
	background-color: #F6F6F6FF;width: 100vw;
}

.main-container {
	width: 100vw;
	overflow: hidden;
	position: relative;
}

// 顶部背景
.top-bg {
	background: linear-gradient(to right, #FF8143FF 390rpx, #FF5B31FF 1140rpx);
	// width: 1532rpx;
	width: 1532rpx;
	height: 400rpx;
	position: absolute;
	top: -114rpx;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	z-index: -1;
}

// 个人信息
.userinfo-chat-box {
	display: flex;
	justify-content: space-between;
	margin: 48rpx 32rpx 25rpx;
	color: white;

	.userinfo-box {
		display: flex;

		.content {
			margin-left: 20rpx;
			padding: 8rpx 0 6rpx;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			&-top {
				display: flex;
				align-items: center;
			}

			.vip {
				margin-left: 6rpx;
				// margin-top: 20rpx;
				width: 80rpx;
				height: 36rpx;
				background: linear-gradient(141deg, #F3EFE0 0%, #FEE092 100%);
				border-radius: 16rpx;
				border: 2rpx solid #FCFFD8;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #FFB600FF;

				text {
					margin-left: 6rpx;
				}
			}

			.time {
				font-size: 24rpx;
				font-weight: normal;
				padding-top: 10rpx;
			}
		}
	}

	.chat-box {
		width: 134rpx;
		height: 52rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 26rpx;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		display: flex;
		align-items: center;
		position: relative;

		.info-icon {
			position: absolute;
			top: 0;
			right: 0;
		}

		.text {
			margin-left: 10rpx;
		}
	}
}

// 签到
.signin-box {
	margin: 0 32rpx;
	height: 128rpx;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx;
	box-sizing: border-box;

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.left-box {
		display: flex;
		align-items: center;

		.content-box {
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 80rpx;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: #FF7733FF;
			}

			.integral {
				font-size: 24rpx;
				color: #FFB58FFF;
			}
		}
	}

	.signin-btn {
		width: 116rpx;
		height: 52rpx;
		font-size: 20rpx;
		padding: 0;
		border-radius: 12rpx;
		background: linear-gradient(138deg, #FF8143 0%, #FF5B31 100%);
	}
}

.container {
	margin: 24rpx 32rpx 0;
	padding: 24rpx;
	background-color: white;
	border-radius: 12rpx;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: bold;
		color: #303030FF;

		.more {
			font-size: 24rpx;
			color: #B9B9B9FF;
		}
	}
}

.order-ul-top,
.service-ul {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.li {
		text-align: center;
		font-size: 28rpx;
		color: #303030FF;
		position: relative;

		.red {
			color: #F33224FF;
			font-size: 24rpx;
			font-weight: bold;
		}

		.info-icon {
			position: absolute;
			top: 0;
			left: calc(50% + 30rpx);
		}
	}
}

.order-ul,
.service-ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40rpx;

	.li {
		text-align: center;
		font-size: 28rpx;
		color: #303030FF;
		position: relative;

		.info-icon {
			position: absolute;
			top: 0;
			left: calc(50% + 30rpx);
		}
	}
}

.service-ul {
	justify-content: start;

	.li {
		flex: 1;

		&:first-child {
			border-right: 2rpx solid #2023270F;
		}
	}
}

.toos-ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 40rpx 0;
	margin-top: 40rpx;

	.li {
		text-align: center;
		font-size: 28rpx;
		color: #303030FF;
	}
}